<template>
	<div class="es-header">
		<!-- 左侧 LOGO-->
		<div class="es-header-left">
			<img src="/logo.svg" alt="" />
			<span>{{ locale.login.title }}</span>
		</div>

		<div class="es-header-right">
			<!-- 退出全屏 -->
			<div class="es-header-right-item" v-if="isFullScreen">
				<a-tooltip :arrow="false">
					<template #title>{{ locale.header.exitFullScreen }}</template>
					<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="22" height="22">
						<path
							d="M747.90557837 646.7890625h101.10662843c9.31420898 0 17.25402856 3.29754663 23.82934617 9.88769508 6.60992408 6.59509253 9.89758325 14.52502465 9.89758253 23.79968309 0 9.37353516-3.28765845 17.30346656-9.90252662 23.8985591-6.57037354 6.59014916-14.51019311 9.88769508-23.82440208 9.88769578h-101.10168434c-9.30432153 0-17.25402856 3.29754663-23.82934546 9.88769508-6.60992408 6.59509253-9.88769508 14.52502465-9.88769579 23.794739v101.1610105c0 9.26971435-3.29754663 17.20458984-9.89758254 23.79473901-6.58026099 6.59014916-14.52502465 9.88769508-23.82934617 9.88769508-9.29443336 0-17.25897193-3.29754663-23.80956984-9.88769508-6.62475562-6.59509253-9.89758325-14.52502465-9.89758325-23.79473901v-101.1610105c0-27.91296386 9.85803199-51.71264625 29.61364723-71.48803711 19.74572778-19.77539086 43.55529761-29.56420922 71.48309374-29.56420922l0.04943799-0.09887672zM343.46917724 141.21142578c9.3092649 0 17.25897193 3.29754663 23.8244021 9.88769508 6.60992408 6.59509253 9.89758325 14.52502465 9.89758253 23.79473901v101.1610105c0 27.91296386-9.87780761 51.71264625-29.62353468 71.48803711-19.74572778 19.77539086-43.58001733 29.66308594-71.4929812 29.66308594H174.96307349c-9.29443336 0-17.25402856-3.29260253-23.82440138-9.98657179-6.60992408-6.49127173-9.88769508-14.42120385-9.88769578-23.79473902 0-9.27465844 3.27777099-17.20458984 9.88769578-23.79968238 6.57531762-6.59014916 14.52502465-9.88769508 23.82934547-9.88769578h101.10168433c9.31420898 0 17.25402856-3.29754663 23.82934618-9.88769508 6.60992408-6.59509253 9.89758325-14.52502465 9.89758254-23.794739V174.89385987c0-9.26971435 3.27282691-17.30346656 9.89758324-23.79473901 6.57531762-6.69396997 14.51513648-9.88769508 23.81451392-9.88769508h-0.03955055zM174.96307349 646.7890625H276.07959008c27.91296386 0 51.74725342 9.88769508 71.48803711 29.66803002 19.75067115 19.67651344 29.62847876 43.57507324 29.62847877 71.48803711v101.05224562c0 9.37847924-3.28765845 17.30841065-9.89758325 23.90350389-6.56542945 6.59014916-14.51513648 9.88769508-23.82934547 9.88769508-9.29443336 0-17.25402856-3.29754663-23.80957054-9.88769508-6.62475562-6.59509253-9.90252662-14.52502465-9.90252662-23.8985598v-101.05224634c0-9.37847924-3.28271508-17.30841065-9.90747071-23.79968237-6.56048608-6.69396997-14.50030493-9.9865725-23.82440209-9.9865725H174.91857886c-9.30432153 0-17.25402856-3.1986692-23.819458-9.89263917-6.60992408-6.49127173-9.88769508-14.52502465-9.88769508-23.79473829 0-9.27465844 3.27777099-17.30346656 9.88769508-23.79968309 6.56048608-6.69396997 14.51513648-9.88769508 23.81451463-9.88769508h0.049438zM680.51104712 141.21142578c9.31420898 0 17.26391602 3.29754663 23.82934618 9.88769508 6.60992408 6.59509253 9.89263916 14.52502465 9.89263917 23.79473901v101.1610105c0 9.26971435 3.28765845 17.30346656 9.90252661 23.794739 6.56048608 6.69396997 14.52008057 9.88769508 23.82440209 9.88769508h101.09674025c9.3092649 0 17.26391602 3.29754663 23.82934618 9.88769578 6.6049807 6.59509253 9.90252662 14.52502465 9.90252662 23.8985591 0 9.27465844-3.29754663 17.20458984-9.89758325 23.79968309-6.57531762 6.59014916-14.52502465 9.88769508-23.83428955 9.88769508h-101.10168433c-27.92285133 0-51.72253442-9.88769508-71.48803711-29.56420922-19.76055932-19.77539086-29.61364722-43.57507324-29.61364722-71.48803711V174.99273657c0-9.37353516 3.28271508-17.30346656 9.88769507-23.79473829 6.57037354-6.69396997 14.53491211-9.88769508 23.82934546-9.88769578L680.51599121 141.21142578z"></path>
					</svg>
				</a-tooltip>
			</div>

			<!-- 全屏 -->
			<div class="es-header-right-item" v-else>
				<a-tooltip :arrow="false">
					<template #title>{{ locale.header.fullScreen }}</template>
					<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="22" height="22">
						<path
							d="M849.07153297 646.81872559c9.30432153 0 17.26391602 3.30249 23.82934617 9.88769507 6.60992408 6.59509253 9.88769508 14.52502465 9.88769508 23.79473901v101.14617896c0 27.90801978-9.87780761 51.70275879-29.61364722 71.47814965-19.75067115 19.77539086-43.56518578 29.66308594-71.48803711 29.66308594h-101.1165166c-9.32409644 0-17.25402856-3.29754663-23.83428954-9.9865725-6.59509253-6.49127173-9.90252662-14.52502465-9.90252662-23.7947383 0-9.26971435 3.30743408-17.20458984 9.90252662-23.79473901 6.58026099-6.59014916 14.51019311-9.88769508 23.83428954-9.88769507h101.1165166c9.29937744 0 17.26391602-3.29754663 23.82440137-9.88769579 6.61486816-6.59014916 9.88769508-14.52008057 9.88769579-23.89361573v-101.04235815c0-9.36859107 3.28765845-17.30346656 9.89758254-23.78979493 6.57531762-6.69396997 14.52502465-9.99151587 23.83923363-9.99151587l-0.06427025 0.09887671zM242.38726782 141.3103025h101.10168506c9.30432153 0 17.2688601 3.29754663 23.819458 9.88769578 6.62475562 6.59509253 9.89758325 14.52502465 9.89758254 23.7947383 0 9.37353516-3.27282691 17.30346656-9.89758254 23.79473901-6.5505979 6.69396997-14.51513648 9.9865725-23.81451463 9.9865725h-101.10168433c-9.31915307 0-17.2688601 3.19372583-23.82934547 9.88769508-6.62475562 6.49127173-9.91241479 14.52502465-9.91241479 23.794739v101.04235816c0 9.36859107-3.28271508 17.30346656-9.89758324 23.89361573-6.57531762 6.59014916-14.51513648 9.88769508-23.81451392 9.88769507-9.31420898 0-17.25402856-3.29754663-23.82934547-9.88769507C144.49908423 360.80230689 141.21142578 352.86743141 141.21142578 343.49884033V242.45648217c0-27.91296386 9.86792016-51.70275879 29.62353539-71.47814965 19.75067115-19.77539086 43.57507324-29.66308594 71.48803711-29.66308594h0.06426954zM174.9877932 646.81872559c9.30432153 0 17.24414039 3.30249 23.81451393 9.88769507 6.62475562 6.59509253 9.90252662 14.52502465 9.90252662 23.79473901v101.14617896c0 9.26971435 3.27282691 17.19964576 9.89758324 23.78979492 6.57531762 6.59014916 14.51513648 9.88769508 23.81451393 9.88769579h101.12640404c9.29937744 0 17.25402856 3.29754663 23.82934547 9.88769507 6.60992408 6.59014916 9.88769508 14.52502465 9.88769579 23.89361572 0 9.26971435-3.27777099 17.20458984-9.88769579 23.79473901-6.57531762 6.59014916-14.52996803 9.88769508-23.82934547 9.88769508H242.41693092c-27.91296386 0-51.71264625-9.88769508-71.47814895-29.66308594-19.75561523-19.67651344-29.62353539-43.57012915-29.62353539-71.47814965v-101.04235816c0-9.26971435 3.27282691-17.30346656 9.88769507-23.89361573 6.58026099-6.59509253 14.52502465-9.88769508 23.81451464-9.88769507h-0.02966309zM680.57037329 141.3103025h101.1165166c27.92285133 0 51.73736596 9.88769508 71.48803711 29.56420922 19.73583961 19.77539086 29.61364722 43.57012915 29.61364722 71.47814965v101.14617896c0 9.26971435-3.27777099 17.30346656-9.88769508 23.78979493-6.56542945 6.69396997-14.52502465 9.88769508-23.82934617 9.88769506-9.29937744 0-17.26391602-3.19372583-23.82440139-9.88769506-6.61486816-6.48632836-9.88769508-14.52008057-9.88769579-23.78979493V242.35266137c0-9.26971435-3.28765845-17.19964576-9.90252661-23.78979492-6.57037354-6.59509253-14.52008057-9.88769508-23.83428955-9.88769579h-101.10168433c-9.31420898 0-17.2688601-3.29754663-23.82934618-9.88769507-6.60992408-6.59509253-9.89758325-14.52502465-9.89758254-23.79473902 0-9.37353516 3.28765845-17.30346656 9.89758254-23.89361571 6.56048608-6.59014916 14.51513648-9.88769508 23.82934618-9.88769508l0.04943799 0.09887672z"></path>
					</svg>
				</a-tooltip>
			</div>

			<!-- 测试用 -->
			<div class="login-box-menu-item">
				<a-dropdown placement="bottom" :arrow="false" @click.prevent>
					<a class="ant-dropdown-link" @click.prevent>
						<!-- 自定义 icon -->
						<icon>
							<template #component="svgProps">
								<svg v-bind="svgProps" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2010" width="16" height="16">
									<path
										d="M651.3 390.041h325.224a47.76 47.76 0 0 1 46.623 48.897v536.165A47.76 47.76 0 0 1 976.524 1024H419.322a47.76 47.76 0 0 1-46.623-48.897V633.959H46.907A47.76 47.76 0 0 1 0.284 585.062V48.897A47.76 47.76 0 0 1 46.907 0h557.77A47.76 47.76 0 0 1 651.3 48.897zM46.907 585.061h557.77V48.898H46.907v536.165z m635.665-16.488l-102.343 278.6h45.485l25.018-71.64h113.714l25.018 71.64h43.78l-102.912-278.6z m-22.175 170.572l44.35-126.223 47.19 126.223z m-354.22-625.43h35.251v71.071h135.32v188.198h-35.251V350.81H341.428V481.58h-33.546V350.81h-97.226v22.174h-35.251V184.786h132.477z m-95.52 200.706h96.657v-93.246h-96.658z m130.771 0h100.069v-93.246H341.428z"
										fill="#333333"
										p-id="2011"
										data-spm-anchor-id="a313x.search_index.0.i5.49043a81w4f1YM"
										class="selected"></path>
								</svg>
							</template>
						</icon>
						<icon style="margin-left: 6px">
							<template #component="svgProps">
								<svg v-bind="svgProps" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1211" width="16" height="16">
									<path
										d="M512 657.723077c-7.876923 0-15.753846-3.938462-19.692308-7.876923l-240.246154-232.369231c-11.815385-11.815385-11.815385-31.507692 0-43.323077 11.815385-11.815385 31.507692-11.815385 43.323077 0l220.553847 212.676923 220.553846-212.676923c11.815385-11.815385 31.507692-11.815385 43.323077 0 11.815385 11.815385 11.815385 31.507692 0 43.323077l-240.246154 232.369231c-11.815385 3.938462-19.692308 7.876923-27.569231 7.876923z"
										fill="#333333"
										p-id="1212"></path>
								</svg>
							</template>
						</icon>
					</a>
					<template #overlay>
						<a-menu @click="handleLanguageChange">
							<a-menu-item :class="{ 'ant-menu-item-active': i18n.getLanguage() === 'zh-cn' }" key="zh-cn">{{ locale.login.langArray[0] }}</a-menu-item>
							<a-menu-item :class="{ 'ant-menu-item-active': i18n.getLanguage() === 'zh-tw' }" key="zh-tw">{{ locale.login.langArray[1] }}</a-menu-item>
							<a-menu-item :class="{ 'ant-menu-item-active': i18n.getLanguage() === 'en' }" key="en">{{ locale.login.langArray[2] }}</a-menu-item>
						</a-menu>
					</template>
				</a-dropdown>
			</div>

			<!-- 测试用 -->
			<div class="login-box-menu-item">
				<Switch v-model:value="isDark" />
			</div>

			<!-- 消息中心 -->
			<div class="es-header-right-item">
				<a-tooltip :arrow="false">
					<template #title>{{ locale.header.message }}</template>
					<a-badge :dot="Boolean(messageCount)">
						<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="22" height="22">
							<path
								d="M192.032 631.402667V404.725333C192.032 228.330667 335.285333 85.333333 512 85.333333s319.968 142.997333 319.968 319.392v226.677334l60.608 121.013333c10.645333 21.237333-4.832 46.218667-28.618667 46.218667H160.042667c-23.786667 0-39.253333-24.981333-28.618667-46.218667l60.608-121.013333z m620.16 103.36l-40.842667-81.536a31.893333 31.893333 0 0 1-3.381333-14.282667V404.725333c0-141.12-114.602667-255.509333-255.968-255.509333S256.032 263.605333 256.032 404.725333V638.933333c0 4.96-1.162667 9.845333-3.381333 14.293334l-40.842667 81.525333h600.384z m-443.306667 152.32a31.893333 31.893333 0 0 1-4.149333-44.981334 32.032 32.032 0 0 1 45.056-4.138666A159.36 159.36 0 0 0 512 874.773333a159.36 159.36 0 0 0 102.186667-36.8 32.032 32.032 0 0 1 45.056 4.138667 31.893333 31.893333 0 0 1-4.16 44.981333A223.402667 223.402667 0 0 1 512 938.666667c-52.981333 0-103.2-18.453333-143.114667-51.594667z"></path>
						</svg>
					</a-badge>
				</a-tooltip>
			</div>

			<!-- 头像下拉 -->
			<div class="es-header-right-item">
				<a-dropdown placement="bottomRight" :arrow="false" @click.prevent>
					<a-avatar shape="square" :src="Avatar"></a-avatar>
					<template #overlay><avatarDtropdown /></template>
				</a-dropdown>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import Avatar from '../../assets/avatar.jpg';
import { setTheme } from '../../utils/theme';
import { useLocale } from '../../hooks/locale';
import { localForage } from '../../localforage';
import avatarDtropdown from './components/avatar-dropdown.vue';
import Switch from '../Switch.vue';
import { i18n } from '../../i18n';
import type { MenuProps } from 'ant-design-vue';
import Icon from '@ant-design/icons-vue';

// 是否全屏
const isFullScreen = ref(false);

// 消息中心未读
const messageCount = ref(1);

// 多语言实现
const { locale } = useLocale();

// 测试用
// 测试用
// 处理语言下拉
const handleLanguageChange: MenuProps['onClick'] = ({ key }) => {
	i18n.setLanguage(<'zh-cn' | 'zh-tw' | 'en'>key);
	localForage.setItem('language', key);
};
// 从 localStorage 中获取，并设置主题 - 测试用
const isDark = ref(Boolean(localForage.getItem('theme') === 'dark'));
watch(
	() => isDark.value,
	val => setTheme(val ? 'dark' : 'light')
);
</script>

<style lang="less" scoped>
.es-header {
	height: 64px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: all 0.3s;
	color: var(--colorText);
	border-bottom: solid var(--colorBorder) 1px;
}
.es-header-left {
	cursor: pointer;
	font-size: 18px;
	font-weight: 800;
	user-select: none;
	height: 100%;
	display: flex;
	align-items: center;
	img {
		height: 50%;
		margin: 0 20px;
	}
}

.es-header-right {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.es-header-right .es-header-right-item {
	display: flex;
	align-items: center;
	justify-content: center;
	user-select: none;
	cursor: pointer;
	padding: 0 20px;
	i {
		transition: all 0.3s;
		color: var(--colorText);
	}
	svg {
		outline: none;
		path {
			transition: all 0.3s;
			fill: var(--colorText);
		}
	}
}
</style>
